Barriers

Look at these two phrases describing a date of birth in English and in French, for instance:

Date of Birth

Date de Naissance

These two aren't that much of a difference in length to mess up a UI but what if you are moving to/from a language with a totally different script like Chinese?

出生日期 (Chinese)

In the best case, you'll have a UI that looks untidy, in the worse case, you might have overlapping and unreadable text.

Before ConstraintLayout

Before ConstraintLayout, you might have used an embedded GridLayout for this layout. As mentioned earlier in this lesson, GridLayout does come with added complexity and possibly double taxation.

With ConstraintLayout, we can achieve this same effect without making the UI more complex.

Just as guidelines in general help us to make layouts more faithful to mocks and designs, barriers help us do the same for variable width elements (often in internationalization).

In the simple Date of Birth example, we had different relative widths for each of the languages, tweaking the sizes for every language would be nigh impossible.

Creating a Barrier

Here we have the UI in XML code.

To specify which Views we want tied to a group, we can add their ids as a comma separated list to the property

app:constraint_referenced_ids

Note that they don't need the @+id/ prefix.

The other required property is barrier_direction

app:barrierDirection="end" <!--start,end, top, bottom, right,left-->

which specifies which edge of the elements the barrier will be relative to. In our case, we'd like the barrier to be constrained to the end of the street address.

<android.support.constraint.ConstraintLayout  ...>
<TextView android:id="@+id/streetAddress" .. />
<EditText ...
    app:layout_constraintStart_toEndOf="@+id/barrier" />

 <TextView
   android:id="@+id/dateOfBirth"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_marginStart="8dp"
   android:text="string@/dob"
   app:layout_constraintStart_toStartOf="@+id/guideline"
   tools:layout_editor_absoluteY="74dp" />
<EditText
   android:layout_width="200dp"
   android:layout_height="wrap_content"
   android:layout_marginEnd="8dp"
   android:layout_marginStart="44dp"
   app:layout_constraintStart_toEndOf="@+id/barrier"
   tools:layout_editor_absoluteY="61dp" />

 <android.support.constraint.Barrier
   android:id="@+id/barrier"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   app:barrierDirection="end" <!--start,end top, bottom, right,left-->
   app:constraint_referenced_ids="streetAddress,dateOfBirth"
   app:layout_constraintGuide_begin="16dp" />

</android.support.constraint.ConstraintLayout>

A note about start/end vs left/right

In most cases, especially when a UI will be translated to different languages, you should favor use of start and end over left and right.

In RTL(right to left) languages like Arabic and Hebrew, left corresponds to the end of any given element. Using start / end makes it easier to adapt your UI later if you add RTL languages.

start/end were added in API 17(Android 4.2). At the time of writing, devices running API 17 or higher comprised 97.1% of devices that visited Google Play.

Next Concept